<!--{include(file='head.html')}-->
<script src="template/jslib/ui/jquery-ui.js" type="text/javascript"></script>
<link href="template/jslib/ui/ui.css" rel="stylesheet" type="text/css" />
<script src="template/jslib/upload/ajaxupload.js" type="text/javascript"></script>

<div id="wrap">
	<!--{include('left.html')}-->
	
	<div id="maincont">
		<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
		<form action="<!--{url('admin','express','tplsave')}-->" method="post" name="submitform" id="submitform">
		<div id="main_c">
		<!--{if $opertype == "edit"}-->
			<ul class="bk">
				<li>
					<label><em>*</em>模版名称：</label>
					<p>
						<input class="input_tx" value="<!--{$tpl.name}-->" name="name" id="name" type="text" />
					</p>
				</li>
			</ul>

			<ul class="bk">
				<li>
					<label>快递公司：</label>
					<p>
						<select name="companyid">
							<!--{$companyopt}-->
						</select>
					</p>
				</li>
				<li>
					<label>自定义图片：</label>
					<p>
						<div id="buttonholder" class="left"></div>
						<input type="hidden" value="<!--{$tpl.tplpic}-->" name="tplpic" id="tplpic"/>
					</p>
				</li>
			</ul>

			<ul class="bk">
				<li>
					<label>模版尺寸：</label>
					<p>
						宽 ：<input type="text" value="<!--{$tpl.width}-->" class="input_tx mini" id="width" name="width" size="5"/> mm
						高 ：<input type="text" value="<!--{$tpl.height}-->" class="input_tx mini" id="height" name="height" size="5"/> mm
						<a href="javascript:void(0);" onclick="$.oper.setHeight();return false;" class="bt_style2">重设高度</a>
					</p>
				</li>
				
			</ul>
			
			<table class="tableStyle printopt" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<!--{foreach $printopt key print}-->
						<td>
							<input type="checkbox" name="printopt[<!--{$key}-->]" value="<!--{$key}-->" 
							<!--{if in_array($key,$selkeys)}-->checked<!--{/if}--> onclick="checkto(this)"/><!--{$print.name}-->
							<input type="hidden"   name="printscale[<!--{$key}-->]" value="" id="scale_<!--{$key}-->"/>
						</td>
						<!--{if $.foreach.default.index && ($.foreach.default.index + 1) % 4 ==0 }-->
						</tr>
						<tr>
						<!--{/if}-->
						<!--{/foreach}-->
					</tr>
			</table>

		</ul>

			<div style="position:relative">
					<!--{foreach $printopt key print}-->
					<div class="resizeDiv" id="printopt_<!--{$key}-->"
<!--{if in_array($key,$selkeys)}-->
	style="left:<!--{$selprintopt[$key].left}-->px;top:<!--{$selprintopt[$key].top}-->px;
			width:<!--{$selprintopt[$key].width}-->px;height:<!--{$selprintopt[$key].height}-->px"	
<!--{else}-->
	style="display:none;left:10px;top:<!--{$.foreach.default.index*30}-->px"
<!--{/if}-->
					><!--{$print.name}-->
					</div>
					<!--{/foreach}-->
					<!--{if $tpl}-->
						<img src="<!--{$tpl.tplpic}-->"  width="766" height="422" id="bimg"/>
					<!--{else}-->
						<img src="template/admin/images/nopicture.jpg" width="766" height="422" id="bimg"/>
					<!--{/if}-->
			</div>
		<!--{elseif $opertype=="add"}-->
			<ul class="bk">
				<li>
					<label>选择模版：</label>
					<p>
						<select name="picid" id="picid">
							<option value="">选择模版</option>
							<!--{$picopt}-->
						</select>
					</p>
				</li>
				<li>
					<label><em>*</em>模版名称：</label>
					<p>
						<input class="input_tx" value="<!--{def($tpl.name,'')}-->" name="name" id="name" type="text" />
					</p>
				</li>
			</ul>

			<ul class="bk">
				<li>
					<label>快递公司：</label>
					<p>
						<select name="companyid">
							<!--{$companyopt}-->
						</select>
					</p>
				</li>
				<li>
					<label>自定义图片：</label>
					<p>
						<div id="buttonholder"></div>
						<input type="hidden" value="<!--{def($tpl.tplpic,'')}-->" name="tplpic" id="tplpic"/>
					</p>
				</li>
				
			</ul>
			
			<ul class="bk">
				<li>
					<label>模版尺寸：</label>
					<p>
						宽 ：<input type="text" value="<!--{def($tpl.width,'')}-->" class="input_tx mini" id="width" name="width" size="5"/> mm
						高 ：<input type="text" value="<!--{def($tpl.height,'')}-->" class="input_tx mini" id="height" name="height" size="5"/> mm
						<a href="javascript:void(0);" onclick="$.oper.setHeight();return false;" class="bt_style2">重设高度</a>
					</p>
				</li>
				
			</ul>
			
			<table class="tableStyle printopt" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<!--{foreach $printopt key print}-->
						<td>
							<input type="checkbox" checked name="printopt[<!--{$key}-->]" value="<!--{$key}-->"  onclick="checkto(this)"/> <!--{$print.name}-->
							<input type="hidden"   name="printscale[<!--{$key}-->]" value="" id="scale_<!--{$key}-->"/>
						</td>
						<!--{if $.foreach.default.index && ($.foreach.default.index + 1) % 4 ==0 }-->
						</tr>
						<tr>
						<!--{/if}-->
						<!--{/foreach}-->
					</tr>
			</table>

		</ul>

			<div style="position:relative">
					<!--{foreach $printopt key print}-->
					<div class="resizeDiv" id="printopt_<!--{$key}-->" style="left:10px;top:<!--{$.foreach.default.index*30}-->px"><!--{$print.name}--></div>
					<!--{/foreach}-->
					<!--{if $tpl}-->
						<img src="<!--{$tpl.tplpic}-->" width="766" height="422" id="bimg"/>
					<!--{else}-->
						<img src="template/admin/images/nopicture.jpg" width="766" height="422" id="bimg"/>
					<!--{/if}-->
			</div>
		<!--{/if}-->
			<div class="bt_bk2">
				<input type="hidden" value="<!--{$opertype}-->" name="opertype" />
				<input type="hidden" value="<!--{def($tplid)}-->" name="tplid" />
				<a href="javascript:void(0);" class="btn" onclick="jssubmit('expresstpl');return false;"><span>保存</span></a>
			</div>
		</div>
		</form>
		<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
	</div>
</div>
<!--{include(file='foot.html')}-->
<script type="text/javascript">
function onComplete(id, fileName, serverData) {
	data = serverData;
	if(data.err){
		progress.setStatus(data.err);
	}else{
		$("#bimg").attr("src",data.msg);
		$("#tplpic").val(data.msg);
	}
}

$(function() {
	//切换模版
	$("#picid").change(function(){
		var url = "<!--{url('admin','express','tpladd')}-->";
		url += "&picid="+$(this).val();
		window.location.href = url;
	});
	//打印选项拖拽
	$('.resizeDiv').resizable({containment:"#bimg"}).draggable({containment:"#bimg"});
	//上传
	var uploader = new qq.FileUploader({action:"<!--{url('admin','uploadfile','expresstpl')}-->"});
	
	$.oper.submit = function(){
		$(".printopt input[type='checkbox']:checked").each(function(){
			var $this = $(this),val = $this.val(),ele = $("#printopt_"+val);
			var width = ele.width(),height=ele.height(),position = ele.position(),top = position.top,left=position.left;
			$("#scale_"+val).val(width+"_"+height+"_"+top+"_"+left);
		});
		$("#submitform").submit();
	}
	$.oper.setHeight = function(){
		var newheight = parseInt($("#height").val()) || 0,
			newwidth = parseInt($("#width").val()) || 0;
		if(!newheight || !newwidth) return ;
		var ele = $("#bimg"),width = parseInt(ele.css('width')) || 0,
			height = parseInt(ele.css('height')) || 0;
			sheight = width / newwidth *  newheight,$bimg = $("#bimg");
		$bimg.animate({height:sheight},1000, "linear",function(){
			$bimg[0].height = sheight;
		});
	}
	<!--{if $tpl}-->
	$.oper.setHeight();
	<!--{/if}-->
});

function checkto(obj){
	var $this = $(obj),check = $this.prop("checked"),val = $this.val();
	var func = check ? "show":"hide";
	$("#printopt_"+val)[func]();
}
</script>